import './pop.css'
import template from './pop.tet'
//不能写入文本形式的html（会覆盖之前的dom）
//创建一个div做中转template插入body
const pop = document.createElement('div')
document.body.appendChild(pop)
pop.innerHTML = template

//为插入的dialog(遮罩)附加点击事件，被点击时关闭弹窗
pop.children[0].onclick = function () {
  pop.children[0].style.display = 'none'
}
//为了防止点击遮罩内部的弹窗主体时也关闭，所以，在主体上加入相同事件并阻止传递
pop.children[0].children[0].onclick = function (e) {
  e.stopPropagation()
}
export default {
  //当被调用时遮罩显示
  show() {
    pop.children[0].style.display = 'flex'
  },
  load(html) {
    pop.children[0].children[0].innerHTML = html
    return pop.children[0].children[0]
  },
  hide() {
    pop.children[0].style.display = 'none'
  }
}